<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>

<body>
    <main id="app">
        <div>
            <router-link to="/first">省份</router-link>
        </div>
        <router-view></router-view>
    </main>
    <script id="first" type="text/html">
        <div>
            <!-- <button @click='getRouter'>点击查看路由信息 </button> -->
            <button v-for='pro in Pro'>
                <router-link :to="'/first/' + pro">{{pro}}</router-link>
            </button>    
        </div>
    </script>

    <script id="second" type="text/html">
    <div>
        <!--  -->
        <button v-for='city in cityName.cityArray'>
            <router-link :to="'/first/'+ cityName.secondRouter+'/'+city">{{city}}</router-link>
        </button>

    </div>
    </script>

    <script id="third" type="text/html">
       <div>
            <button v-for='area in areaName'>{{area}}</button>
       </div>
    </script>

    <script>
        var first = {
            template: "#first",
            methods: {
                
            },
            data: function () {
                return {
                    Pro: ['河南省', '福建省'],

                }
            }
        }
        var second = {
            template: "#second",
           
            computed: {

                cityName: function () {
                    var secondRouter = this.$route.params.second
                    if (this.$route.params.second == '河南省') {
                        return  {
                            cityArray:['郑州市', '周口市'],
                            secondRouter
                        }
                    }
                    if (this.$route.params.second == '福建省') {
                        return  {
                            cityArray:['福州市', '厦门市'],
                            secondRouter
                        }
                    }
                }
            },
        }
        var third = {
            template: "#third",
            computed: {
                areaName:function(){
                    if (this.$route.params.third == '周口市') {
                        return  ['第一区', '第二区']
                    }
                    if (this.$route.params.third == '郑州市') {
                        return  ['二七区', '惠济区']
                    }
                    if (this.$route.params.third == '福州市') {
                        return  ['仓山区', '台江区']
                    }
                    if (this.$route.params.third == '厦门市') {
                        return  ['集美区', '翔安区']
                    }
                }
            },
        }

        var routerList = [
            {
                path: '/first',
                component: first,
            },
            {
                path: '/first/:second',
                component: second,
            },{
                path:'/first/:second/:third',
                component:third,
            }
        ]
        var routerObj = new VueRouter({
            routes: routerList
        })


        var vue = new Vue({
            el: "#app",
            data: {

            },
            router: routerObj,
            
        })
    </script>
</body>

</html>